new AjaxUpload(jQuery('#btnAddIcon'), {
	action: 'uploadfile.php',
	name: 'image2',
	responseType: 'json',
	onChange: function(file, ext){
	},
	onSubmit: function(file, ext){
		// Allow only images. You should add security check on the server-side.
		if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)) {                            
			$('#iconloading').html(strloading);
		} else {
			alert('Your selection is not image');
			return false;
		}                            
	},
	onComplete: function(file, response){
		
		if(response.files.error == 'none')
		{
			$('input#Icon').val(response.files.imageid);
			$('input#IconPath').val(response.files.imagepath);
			$('input#IconThumbnail').val(response.files.imagethumbnail);
			$('#previewIcon').attr("src", response.files.imagethumbnail);
			
			
		}
		else
		{
			alert(response.files.error)
		}
		$('#iconloading').html("");
		
	}
});

new AjaxUpload(jQuery('#btnAddImageColor'), {
	action: 'uploadfile.php',
	name: 'image2',
	responseType: 'json',
	onChange: function(file, ext){
	},
	onSubmit: function(file, ext){
		// Allow only images. You should add security check on the server-side.
		if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)) {                            
			$('#imagecolorloading').html(strloading);
		} else {
			alert('Your selection is not image');
			return false;
		}                            
	},
	onComplete: function(file, response){
		
		if(response.files.error == 'none')
		{
			$('input#ImageColor').val(response.files.imageid);
			$('input#ImageColorPath').val(response.files.imagepath);
			$('input#ImageColorThumbnail').val(response.files.imagethumbnail);
			$('#previewImageColor').attr("src", response.files.imagethumbnail);
			
			
		}
		else
		{
			alert(response.files.error)
		}
		$('#imagecolorloading').html("");
		
	}
});



function Color() {
	this.index =0;
	this.curent = 0;
	this.newRow=function()
	{
		var row='<tr id="rows'+this.index+'"><input type="hidden" id="ID_'+this.index+'" name="ID['+this.index+']" value="' + $("#ID").val() + '" />'+
					'<td><input type="text" id="ColorName_'+this.index+'" name="ColorName['+this.index+']" value="' + $("#ColorName").val() + '" /></td>' +
					'<td>' +
						'<img id="IconThumbnail_'+this.index+'" src="' + $("#IconThumbnail").val()+ '" />'+
						'<input type="hidden" id="Icon_'+this.index+'" name="Icon['+this.index+']" value="' + $("#Icon").val() + '" />' +
						'<input type="hidden" id="IconPath_'+this.index+'" name="IconPath['+this.index+']" value="' + $("#IconPath").val() + '" />'+
					'</td>'+
					'<td>'+
						'<img id="ImageColorThumbnail_'+this.index+'" src="'+$("#ImageColorThumbnail").val()+'" />'+
						'<input type="hidden" id="ImageColor_'+this.index+'" name="ImageColor['+this.index+']" value="'+$("#ImageColor").val()+'" />'+
						'<input type="hidden" id="ImageColorPath_'+this.index+'" name="ImageColorPath['+this.index+']" value="'+$("#ImageColorPath").val()+'" />'+
					'</td>'+
					'<td>'+
						
						'<input type="hidden" id="Group_'+this.index+'" name="Group['+this.index+']" value="'+$("#Group").val()+'" readonly/>'+
						'<span id="GroupName_'+this.index+'">'+arr[$("#Group").val()]+'</span>'+
						
					'</td>'+
					'<td>'+
						'<a onclick="color.edit(' + this.index + ')">Chỉnh sửa</a><br>'+
						'<a onclick="color.remove(' + this.index + ')">Remove</a>'+
					'</td>'+
				'</tr>';
		return row;
	}
	
	this.addColor = function()
	{
		
		$("#listcolor").append(this.newRow(this.index));
		this.index++;
		this.clear();
	}
	
	this.saveColor = function()
	{
		$("#ColorName_"+this.curent).val($("#ColorName").val());
		$("#IconThumbnail_" + this.curent).attr("src",$("#IconThumbnail").val())
		$("#Icon_"+this.cure1nt).val($("#Icon").val());
		$("#IconPath_"+this.curent).val($("#IconPath").val());
		$("#ImageColorThumbnail_"+this.curent).attr("src",$("#ImageColorThumbnail").val())
		$("#ImageColor_"+this.curent).val($("#ImageColor").val());
		$("#ImageColorPath_"+this.curent).val($("#ImageColorPath").val());
		$("#Group_"+this.curent).val($("#Group").val());
		
		$("#GroupName_"+this.curent).html(arr[$("#Group").val()]);
		
		
		this.clear()
	}
	
	this.edit = function(row)
	{
		this.curent = row;
		$("#ID").val($("#ID_"+row).val());
		$("#ColorName").val($("#ColorName_"+row).val());
		$("#previewIcon").attr("src",$("#IconThumbnail_"+row).attr("src"));
		$("#IconThumbnail").val($("#IconThumbnail_"+row).attr("src"));
		$("#Icon").val($("#Icon_"+row).val());
		$("#IconPath").val($("#IconPath_"+row).val());
		$("#previewImageColor").attr("src",$("#ImageColorThumbnail_"+row).attr("src"));
		$("#ImageColorThumbnail").val($("#ImageColorThumbnail_"+row).attr("src"));
		$("#ImageColor").val($("#ImageColor_"+row).val());
		$("#ImageColorPath").val($("#ImageColorPath_"+row).val());
		$("#Group").val($("#Group_"+row).val());
		
		$("#btnAdd").hide();
		$("#btnSave").show();
	}
	
	this.remove = function(row)
	{
		var id = $("#ID_"+row).val();
		$("#rows"+row).html('<input type="hidden" name="delcolor['+row+']" value="' + id + '" />');
	}
	
	this.clear = function()
	{
		$("#ID").val("");
		$("#ColorName").val("");
		$("#previewIcon").attr("src","");
		$("#IconThumbnail").val("");
		$("#Icon").val("");
		$("#IconPath").val("");
		$("#previewImageColor").attr("src","");
		$("#ImageColorThumbnail").val("");
		$("#ImageColor").val("");
		$("#ImageColorPath").val("");
		$("#Group").val("");
		
		$("#btnAdd").show();
		$("#btnSave").hide();
	}
};

	

